﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2015 Jean-Marc VIGLINO,
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: Layerswitcher</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="An OL3 layerswitcher." />
  <meta name="keywords" content="ol3, layer, layerswitcher, control,jQuery" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>

  <link rel="stylesheet" href="../style.css" />
  <style>
    .hideOpacity .layerswitcher-opacity {
      display:none;
    }
    .hideOpacity .ol-layerswitcher .layerup {
      height: 1.5em;
    }
    .showPercent .layerSwitcher .ol-layerswitcher .layerswitcher-opacity-label {
      display: block;
    }

    .ol-header > div {
      width:100%; 
    }
    .toggleVisibility {
      padding-left: 1.6em;
      cursor: pointer;
      border-bottom: 2px solid #369;
      margin-bottom: 0.5em; 
    }
    .toggleVisibility:before {
      background-color: #fff;
      border: 2px solid #369;
      box-sizing: border-box;
      content: "";
      display: block;
      height: 1.2em;
      left: 0.1em;
      margin: 0;
      position: absolute;
      width: 1.2em;
    }
    .toggleVisibility.show:before {
      background: #369;
    }

  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: LayerSwitcher control</h1>
  </a>
  <div class="info">
    Add a layer switcher inside or outside the map.
    <ul>
      <li>
      The <i>title</i> or <i>name</i> layer's property is used to named the ol.layer in the switcher.
      </li>
      <li>
      It shows use of the <i>displayInLayerSwitcher</i> layer's property to cause it to not display in the LayerSwitcher
      </li>
      <li>
      The <i>baseLayer</i> layer's property manage exclusive visibility on layers (only one base layer is shown at a time).
      </li>
      <li>
      The <i>allwaysOnTop</i> layer's property make a layer to stay on top of others.
      </li>
      <li>
      Layers in an ol.layer.Group are grouped together and can be managed all together (visibility/opacity/ordering).
      </li>
      <li>
      The <i>openInLayerSwitcher</i> property of an ol.layer.Group is used to code the visibility of the sublayers.
      </li>
      <li>
        The <i>show_progress</i> option display a progress bar on tiled layers (only once per map).
      </li>
      <li>
        You can use the <i>setHeader()</i> function to add a header to the layer list.
      </li>
      <li>
        You can use the <i>drawlist</i> event handle the current line display (add button, change list style, etc.)
      </li>
      <li>
        It trigger a <i>toogle</i> event when shown/hidden
      </li>
    </ul>
    <p>
      <a href="map.switcher2.html">You can customize the LayerSwitcher using CSS</a>
    </p>
  </div>

  <!-- Map div -->
  <div id="map" style="width:600px; height:400px;"></div>
  <div class="external layerSwitcher"><b>External layer switcher</b></div>

  <div class="options">
    <h2>Options:</h2>
    <input id="dils" type="checkbox" checked="checked" onchange="displayInLayerSwitcher(this.checked);"/>
    <label for="dils">display "Pirate Map" in LayerSwitcher (zoom out to make it visible).</label>
    <br/>
    <input id="opb" type="checkbox" onchange="$('body').toggleClass('hideOpacity');" />
    <label for="opb">hide opacity bar</label>
    <br/>
    <input id="percent" type="checkbox" onchange="$('body').toggleClass('showPercent');" />
    <label for="percent">show percent information</label>
  </div>
  
  <script type="text/javascript">

  // A group layer for base layers
  var baseLayers = new ol.layer.Group({
    title: 'Base Layers',
    openInLayerSwitcher: true,
    layers: [
      new ol.layer.Tile({
        title: "Watercolor",
        baseLayer: true,
        source: new ol.source.Stamen({ layer: 'watercolor' })
      }),
      new ol.layer.Tile({
        title: "Toner",
        baseLayer: true,
        visible: false,
        source: new ol.source.Stamen({ layer: 'toner' })
      }),
      new ol.layer.Tile({
        title: "OSM",
        baseLayer: true,
        source: new ol.source.OSM(),
        visible: false
      })
    ]
  });
  // A layer with minResolution (hidden on hight zoom level)
  var mapbox = new ol.layer.Tile({
    title: "Pirate Map", 
    displayInLayerSwitcher: false,
    minResolution: 1223,
    source: new ol.source.XYZ({	
      attributions: [
        '&copy; <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ',
        ol.source.OSM.ATTRIBUTION
      ],
      url: 'https://{a-d}.tiles.mapbox.com/v3/aj.Sketchy2/{z}/{x}/{y}.png'
    })
  });
  // An overlay that stay on top
  var labels = new ol.layer.Tile({
    title: "Labels (on top)",
    allwaysOnTop: true,			// Stay on top of layer switcher
    noSwitcherDelete: true,		// Prevent deleting from layer switcher
    source: new ol.source.Stamen({ layer: 'terrain-labels' })
  });
  // WMS with bbox
  var brgm = new ol.layer.Tile ({
    "title": "GEOLOGIE",
    "extent": [
      -653182.6969582437,
      5037463.842847037,
      1233297.5065495989,
      6646432.677299531
    ],
    "minResolution": 3.527777777777778,
    "maxResolution": 3527.777777777778,
    "source": new ol.source.TileWMS({
      "url": "https://geoservices.brgm.fr/geologie",
      "projection": "EPSG:3857",
      "params": {
        "LAYERS": "GEOLOGIE",
        "FORMAT": "image/png",
        "VERSION": "1.3.0"
      },
      "attributions": [
        "<a href='http://www.brgm.fr/'>&copy; Brgm</a>"
      ]
    })
  });

  // The Map
  var map = new ol.Map({
    target: 'map',
    view: new ol.View({
      zoom: 11,
      center: [260497, 6249720]
    }),
    layers: [ baseLayers, mapbox, brgm, labels ]
  });
  // Add control inside the map
  var ctrl = new ol.control.LayerSwitcher();
  map.addControl(ctrl);
  ctrl.on('toggle', function(e) {
    console.log('Collapse layerswitcher', e.collapsed);
  });

  // Add a layer switcher outside the map
  var switcher = new ol.control.LayerSwitcher({
    target:$(".layerSwitcher").get(0), 
    // displayInLayerSwitcher: function (l) { return false; },
    show_progress:true,
    extent: true,
    trash: true,
    oninfo: function (l) { alert(l.get("title")); }
  });
  // Add a new button to the list 
  switcher.on('drawlist', function(e) {
    var layer = e.layer;
    $('<div>').text('?')// addClass('layerInfo')
      .click(function(){
        alert(layer.get('title'));
      })
      .appendTo($('> .ol-layerswitcher-buttons', e.li));
  });
  // Add a button to show/hide the layers
  var button = $('<div class="toggleVisibility" title="show/hide">')
    .text("Show/hide all")
    .click(function() {
      var a = map.getLayers().getArray();
      var b = !a[0].getVisible();
      if (b) button.removeClass("show");
      else button.addClass("show");
      for (var i=0; i<a.length; i++) {
        a[i].setVisible(b);
      }
    });
  switcher.setHeader($('<div>').append(button).get(0))

  map.addControl(switcher);
  // Insert mapbox layer in layer switcher
  function displayInLayerSwitcher(b) {
    mapbox.set('displayInLayerSwitcher', b);
  }
  
  // Get options values
  if ($("#opb").prop("checked")) $('body').addClass('hideOpacity');
  if ($("#percent").prop("checked")) $('body').addClass('showPercent');
  if ($("#dils").prop("checked")) displayInLayerSwitcher(true);

  </script>
  
</body>
</html>